<template>
  <AppNavBar> 图书分类 </AppNavBar>
  <Row>
    <Col span="8">
      <collapse v-model="activeName" accordion>
        <collapse-item
          v-for="(category, i) in categories"
          :key="category.id"
          :title="category.name"
          :name="i"
          @click="changeCollapseItem(i)"
        >
          <Sidebar v-model="activeSidebar" color="#42b983">
            <SidebarItem
              v-for="subCategory in category.children"
              :key="subCategory.id"
              :title="subCategory.name"
              @click="changeSlide"
            />
          </Sidebar>
        </collapse-item>
      </collapse>
    </Col>
    <Col span="16" class="col16">
      <!-- 分类tabs -->
      <Tabs color="#42b983" @change="changeTab">
        <Tab
          v-for="(sortCategory, i) in sortCategories"
          :key="i"
          :title="sortCategory.title"
          :name="sortCategory.name"
        >
          <list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <card
              v-for="goods in goodsList"
              :key="goods.id"
              :price="goods.price"
              :desc="goods.updated_at"
              :title="goods.title"
              :thumb="goods.cover_url"
              @click="$router.push(`/detail?id=${goods.id}`)"
            />
          </list>
        </Tab>
      </Tabs>
    </Col>
  </Row>
</template>

<script>
import { ref } from 'vue'
import { getHomeData } from '@/api/home'
import { getGoodsList } from '@/api/category'
import AppNavBar from '@/components/library/AppNavBar.vue'
import { Sidebar, SidebarItem, Row, Col, Collapse, CollapseItem, Tabs, Tab, Card, List } from 'vant'
export default {
  name: 'Category',
  components: { AppNavBar, Sidebar, SidebarItem, Row, Col, Collapse, CollapseItem, Tabs, Tab, Card, List },
  setup () {
    // 侧边栏选中控制
    const activeSidebar = ref(0)
    const activeName = ref(0)
    const categories = ref([])
    const goodsList = ref([])
    const collapseIndex = ref(0)
    // list控制
    const loading = ref(false)
    const finished = ref(false)
    const sortCategories = [{ title: '销量排序', name: 'sales' }, { title: '价格排序', name: 'price' }, { title: '评论排序', name: 'comments_count' }]
    // 请求参数
    const requestData = ref({
      category_id: null,
      sales: 0,
      price: 0,
      comments_count: 0,
      page: 1
    })
    // 发送前先置空
    const setNull = () => {
      requestData.value.sales = 0
      requestData.value.price = 0
      requestData.value.comments_count = 0
    }
    const setPage = () => {
      goodsList.value = []
      requestData.value.page = 1
      finished.value = false
    }
    getHomeData().then(res => {
      categories.value = res.data.categories
      console.log(res)
      requestData.value.category_id = categories.value[0].children[0].id
      // 初始化的时候需要请求一次数据
      getGoodsListFn()
    })
    // 每次切换时候将选中改变
    // 每次切换tab，slide，大的分页都需要重新请求数据
    // 请求前清除之前的数据
    const changeCollapseItem = (i) => {
      console.log(i)
      collapseIndex.value = i
      activeSidebar.value = 0
      requestData.value.category_id = categories.value[collapseIndex.value].children[activeSidebar.value].id
      setPage()
      getGoodsListFn()
    }
    // 获取具体分类id
    const changeSlide = (e) => {
      activeSidebar.value = e
      // 获取分类id
      requestData.value.category_id = categories.value[collapseIndex.value].children[activeSidebar.value].id
      setPage()
      getGoodsListFn()
    }
    const changeTab = (name) => {
      // 每次切换清除上次残留排序方式
      setNull()
      requestData.value[name] = 1
      setPage()
      getGoodsListFn()
    }
    const getGoodsListFn = () => {
      getGoodsList(requestData.value).then(res => {
        if (res.data.goods.data.length) {
          goodsList.value.push(...res.data.goods.data)
          requestData.value.page++
        } else {
          finished.value = true
        }
        loading.value = false
      })
    }

    const onLoad = () => {
      getGoodsListFn()
    }
    return {
      categories,
      activeSidebar,
      activeName,
      changeSlide,
      changeTab,
      goodsList,
      onLoad,
      finished,
      loading,
      sortCategories,
      changeCollapseItem
    }
  }
}
</script>

<style scoped lang='less'>
.van-row {
  margin-top: 53px;
}
:deep(.van-sidebar-item--select::before) {
  background-color: #42b983;
}
.col16 {
  height: 80vh;
  overflow-y: auto;
}
</style>
